<template>
	<scroll-view scroll-y class="public-scroll-view">
		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">泉州风光</text>
				<swiper class="cityExploration-swiper">
					<swiper-item>
						<image style="width: 100%; height: 480rpx; border-radius: 20rpx;" src="/static/cityExploration/city2.jpg"
							mode="scaleToFill"></image>
					</swiper-item>
					<swiper-item>
						<image style="width: 100%; height: 480rpx; border-radius: 20rpx;" src="/static/cityExploration/city3.jpg"
							mode="scaleToFill"></image>
					</swiper-item>
					<swiper-item>
						<image style="width: 100%; height: 480rpx;border-radius: 20rpx;" src="/static/cityExploration/city4.jpg"
							mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">泉州介绍</text>
				<rich-text :nodes="htmlString" style="font-size: 28rpx;"></rich-text>
			</view>
		</view>

		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">探索进度</text>
				<view class="">
					<text>当前进度{{progressNum}}%</text>
					<progress :percent="progressNum" show-info />
				</view>
			</view>
		</view>

		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">当前城市</text>
				<picker mode="region" :value="selectedCity">
					{{selectedCity[0]}}-{{selectedCity[1]}}-{{selectedCity[2]}}
				</picker>
			</view>
		</view>

		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">偏好设置</text>
				<view>
					<radio-group>
						<text>出行方式：</text>
						<radio class="travel-radio">公交</radio>
						<radio checked class="travel-radio">自驾</radio>
						<radio class="travel-radio">步行</radio>
					</radio-group>
				</view>
			</view>
		</view>

		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<view class="ecommended-attractions-container">
					<text class="cityExploration-model-title">显示推荐景点</text>
					<switch></switch>
				</view>
			</view>
		</view>
		
		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">探索半径 {{ExploreRadius}}km</text>
				<slider @change="changeExploreRadiusSlider"></slider>
			</view>
		</view>
		
		<view class="cityExploration-model-container">
			<view class="cityExploration-model">
				<text class="cityExploration-model-title">泉州宣传</text>
				<view>
					<video style="width:100%;" src="/static/cityExploration/city-video.mp4"></video>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				htmlString: `<div>
					<h4>海上丝绸之路起点-泉州</h4>
					<p><span style="font-weight: bold;">历史文化：</span>泉州是国务院首批公布的24个历史文化名
					城之一，是古代”海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</p>
					<br/>
					<p><span style="font-weight: bold;">著名景点：</span>清源山、开元寺、泉州清净寺、崇武古
					城，洛阳桥等。</p>
					<br/>
					<p><span style="font-weight: bold;">特色文化：</span>拥有<span style="color: blue;">南音、木偶观</span>和<span style="color: blue;">闽南建筑</span>等丰富的非
					物质文化遗产。</p>
				</div>`,
				progressNum: 60,
				selectedCity: ["福建省","泉州市","南安市"],
				ExploreRadius:0

			}
		},
		methods: {
				
			changeExploreRadiusSlider(e){
				this.ExploreRadius = e.detail.value;
			}
		}
	}
</script>

<style>
	.cityExploration-model-container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
	}

	.cityExploration-model-title {
		font-size: 32rpx;
		font-weight: bold;

	}

	.cityExploration-model {
		background-color: white;
		width: 90%;
		height: 85%;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.cityExploration-swiper {
		height: 480rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}
	.travel-radio{
		margin-left: 20rpx;
	}
	
	.ecommended-attractions-container{
		display: flex;
		justify-content: space-between;
	}
</style>